<template>
	<view class="page">
		<view v-if="isShowVideo" class="video-page" :style="{'background-image': `url(../../../static/images/video_bg.png)`}">
			<view class="videobox">
				<view class="videoinfo">
					<view class="video">
						<video :src="videoInfo.vo_files" :poster="videoInfo.vi_img"></video>
					</view>
					<view class="info white">
						<view class="name blod600 font_bold">{{videoInfo.title}}</view>
						<view class="acea-row row-between-wrapper">
							<view class="acea-row row-middle">
								<view class="avatar">
									<image :src="videoInfo.le_files"></image>
								</view>
								<view class="size12">讲师：{{videoInfo.le_name}}</view>
							</view>
							<view class="refresh" @click="refresh">
								<text class="iconfont icon-shuaxin size18"></text>
								<text style="margin-left: 10rpx;">刷新</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="padding20">
				<view class="problem padding20 bgWhite radius14">
					<view class="tabbox acea-row row-middle">
						<block v-for="(tab,i) in tablist" :key="i">
							<view :class="tabindex === i ? 'item checked':'item'" @click="changTab(i)">
								{{tab}}
							</view>
						</block>
					</view>
					<view class="content" style="margin-top: 20rpx;">
						<view class="problem-list" v-if="tabindex === 0">
							<block v-for="(item,p) in problemList" :key="p">
								<view class="item">
									<view class="prob blod600 font_bold size13">
										{{p+1}}、
										<text class="dx" v-if="item.type===1">单选</text>
										<text class="dx" v-if="item.type===2">判断</text>
										{{item.title}}
									</view>
									<view class="prob-list paddingt20">
										<block v-for="(pr,r) in item.answer">
											<!-- <radio-group @change="selected">
												<label class="radio"> -->
													<view class="prob-item padding20 bgHui radius8 acea-row row-between-wrapper margint20" :class="pr.selected ? 'checked':''" >
														<!-- <radio :checked="pr.selected" :value="pr.daan" style="display: none;"></radio> -->
														<view class="left blod600">
															<text>{{pr.daan}}</text>
															<text style="padding-left: 20rpx;">{{pr.txt}}</text>
														</view>
														<view class="iconfont icon-duigouxiao" v-if="pr.selected"></view>
													</view>
												<!-- </label>
											</radio-group> -->
										</block>
									</view>
								</view>
							</block>
						</view>
						<view class="company padding10" v-if="tabindex === 1">
							<mp-html :content="videoInfo.systext" />
						</view>
						<view class="lecturer padding10" v-if="tabindex === 2">
							<mp-html :content="videoInfo.le_text" />
						</view>
					</view>
				</view>
			</view>
			<view style="height: 180rpx;"></view>
		</view>
		<view class="upoup acea-row row-center-wrapper" v-else>
			<view class="upoup-bg"></view>
			<view class="upoup-mid padding20">
				<view class='pictrue'>
					<image :src="'../../../static/images/nothing.png'"></image>
				</view>
				<view class="text-ccc font_medium blod600">
					<view>视频活动已结束</view>
					<view>下期活动敬请关注!</view>
				</view>
			</view>
		</view>
        
        <auto-toast ref="autoToast"></auto-toast>
	</view>
</template>

<script>
	import { mapGetters } from "vuex";
	import videoShow from "@/components/videoShow.vue"
	import {toLogin} from "@/libs/login.js"
	// import {userVideoYN} from "@/api/useryk.js"
	import {void_question,hdvideo_one} from "@/api/video.js"
	import Auth from '@/libs/wechat.js'
	import {refreshCurrentPage} from "@/utils/base.js"
	import {Resource_url, Http_url} from "@/config/config.js"
	export default {
		computed: mapGetters(['userInfo', 'isLogin', 'globalData', 'uid']),
		components:{
			videoShow
		},
		data() {
			return {
                Http_url,
				adminUrl:Resource_url,
				id:0,
				hbimg:'../../../static/images/hb_btn.png',
				isShowHb:false,//是否显示红包弹窗
				isPlay:false,//是否自动开始播放
				videoInfo:{},//视频数据
				tabindex:0,			
				// tablist:['有奖答题','企业介绍','讲师介绍'],
				tablist:['有奖答题'],
				problemList:[],//问题列表
				qu_ids:[],//问题id
				daan:[],//问题答案
				isPay:false,//是否购物
				sum:1,//商品数量
				user_name:'',
				user_address:'',
				user_tel:'',
				totalPrice:0,
				isAnswer:false,//是否可提交答案
				isGz:false,//是否显示鼓掌
				isShowList:true,//是否显示问题列表
				isShowVideo:true,//该视频是否有权限可看
                isReceiveHb: false, //是否已领取过红包
                isDt: false ,//是否已答题过 
                speciesShowImgs: [
                    Http_url + '/static/images/jinbitow.png'
                ],
                likeShowImgs: [
                    Http_url + '/static/images/dianzan.png'
                ],
                // 可以点击金币点赞的几个时间段
                speciesTimeList: [],
                // 当前视频播放位置
                videoCurrentTime: 0 ,
                // 累计金币点赞数量
                accumulateCount: 0,
                currentLikeNode: null,
                currentLikeNodeIndex: -1
			};
		},
		onLoad(option) {
			// if(uni.getSystemInfoSync().platform === 'ios'){
			// 	this.refresh()
			// }
			if(!option.id){
				// this.$util.Tips({
				// 	title:'参数错误'
				// })
				return;
			}else{
				this.id = option.id
				this.$store.commit("SETVID", this.id);
                // this.getLikeConfig()
				setTimeout(()=>{
					if(!this.$store.getters.isLogin){
						// toLogin()
					}else{
						let glodData = JSON.parse(uni.getStorageSync('GLOBAL_DATA'))
						// console.log('glodDatass',glodData)
						 let qun_id = option.qun_id !== '' && option.qun_id !== undefined && option.qun_id !== null ? option.qun_id : glodData.qun_id
						 glodData.qun_id = qun_id
						this.$store.commit('GET_GLOBAL', glodData);
						this.getVideoInfo()
						this.getVideoQuestion()
					}
				},100)
			}
		},
		onReady: function(res) {},
        computed: {
            // 是否显示点金币按钮
            showSpecies(){
                const { videoInfo, speciesTimeList, videoCurrentTime } = this
                if(videoInfo.is_dzhb_zt == 1){
                    // 查找当前视频播放位置是否在可以点赞时间区间
                    return this.currentLikeNodeIndex >= 0 ? !this.currentLikeNode.autoLoading : false
                }else {
                    return false
                }
            },
        },
        watch: {
            currentLikeNodeIndex(){
                this.accumulateCount = 0
            },
        },
		methods:{
			  // 监听视频播放
			  timeupdate(e){
				  const { currentTime } = e.detail
				  this.videoCurrentTime = currentTime
			  },
			// 刷新页面
			refresh(){
				refreshCurrentPage()
			},
			goto(url){
				uni.navigateTo({
					url:url
				})
			},
			//视频播放完毕
			overplay(){
				this.isAnswer = true
			},
			// 减少数量
			subCart(){
				this.sum = this.sum == 1 ? 1: Number(this.sum-1);
				if(this.sum > 0){
					this.jsTotal()
				}
			},
			// 添加数量
			addCart(){
				this.sum = Math.min(this.videoInfo.pr_max_sum, this.sum + 1);
				this.jsTotal()
			},
			//计算总金额
			jsTotal(){
				let price = this.videoInfo.pr_price !== '' && this.videoInfo.pr_price !== null && this.videoInfo.pr_price !== undefined ? this.videoInfo.pr_price : 0
				this.totalPrice = parseFloat(this.sum * price)
			},
			// 切换tab
			changTab(index){
				this.tabindex = index
			},
			// 获取视频信息
			getVideoInfo(){
				hdvideo_one({ id: this.id }).then(res=>{
					console.log('getVideoInfo',res)
					this.videoInfo=res.data
					this.videoInfo.vo_files='http://'+this.videoInfo.vo_files.replace(/\\/g, "/")
					this.videoInfo.fx_img=this.adminUrl+this.videoInfo.fx_img.replace(/\\/g, "/")
					this.videoInfo.img=this.adminUrl+this.videoInfo.img.replace(/\\/g, "/")
					this.videoInfo.le_files=this.adminUrl+this.videoInfo.le_files.replace(/\\/g, "/")
					this.videoInfo.pr_files=this.adminUrl+this.videoInfo.pr_files.replace(/\\/g, "/")
					this.videoInfo.vi_img=this.adminUrl+this.videoInfo.vi_img.replace(/\\/g, "/")
					this.jsTotal()
					let shareData = {
						title: res.data.fx_title,
						desc: res.data.fx_con,
						imgUrl: res.data.fx_img,
						link: window.location.origin + '/pages/index/index?id=' + this.id + '&qun_id=' + this.$store.state.app.uid,
					}
					Auth.share(shareData)
				  // console.log(shareData)
			
				}).catch(err=>{
					console.log('err',err)
					// this.$util.Tips({
					// 	title:'视频已下架（暂时无法播放）'
					// })
				})
			},
			// 获取问题
			getVideoQuestion(){
				void_question({id: this.id}).then(res=>{
					// console.log('getVideoQuestion',res)
					this.problemList=res.data
					this.problemList.forEach(item=>{
						let answer = [
							{
								txt:item.xuan_one,
								daan:1,
								selected:false
							},
							{
								txt:item.xuan_tow,
								daan:2,
								selected:false
							}
						]
						item.answer = answer
						item.key = ''
					})
				}).catch(err=>{
					this.$util.Tips({
						title:err
					})
				})
			},


		}
	}
</script>

<style lang="scss">
	.video-page{
		width: 100%;
		min-height: 100vh;
		height: 100%;
		background-color: #FFE9C3;
		background-position: top;
		background-size: contain;
		background-repeat: no-repeat;
	}
	.videobox{
		width: 100%;
		// height: 576rpx;
		padding: 20rpx;
		.videoinfo{
			padding: 10rpx;
			.video{
				width: 100%;
				height: 344rpx;
				background-color: #FFE9C3;
				border-radius: 20rpx;
				overflow: hidden;
                
                video{
                    width: 100%;
                    height: 100%;
                }
			}
			.info{
				padding: 0 10rpx;
			}
			.name{
				padding-top: 10rpx;
                white-space: nowrap; 
                overflow: hidden;
                text-overflow: ellipsis; 
			}
			.avatar{
				width: 48.83rpx;
				height: 48.83rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 10rpx;
			}
			.refresh{
				border: 2rpx #fff solid;
				border-radius: 40rpx;
				padding: 8rpx 10rpx;
			}
		}
	}
	.problem{
		.tabbox{
			.item{
				padding: 0 10rpx;
				margin-right: 20rpx;
				padding-bottom: 20rpx;
			}
			.checked{
				text-align: center;
				font-weight: 600;
				background-image: url('../../../static/images/tab_xb.png');
				background-position: bottom;
				background-repeat: no-repeat;
				background-size: 60%;
			}
		}
		.problem-list{
			.item{
				.prob{
					.dx{
						font-size: 24rpx;
						color: #FF3E62;
						padding: 0 6rpx;
						border-radius: 8rpx;
						border: 2rpx solid #FF3E62;
						margin-right: 6rpx;
					}
				}
				.prob-list{
					.checked{
						border: 2rpx solid #FF3E62;
						.iconfont{
							color: #FF3E62;
						}
					}
				}
			}
		}
	}

	.upoup-mid{
		padding: 50rpx 30rpx;
		.pictrue {
			width: 314rpx;
			height: 236rpx;
			margin: 0 auto 15rpx auto;
			image {
				width: 100%;
				height: 100%
			}
		}
		.text-ccc{
			text-align: center;
			width: 60%;
			display: block;
			margin: auto;
			margin-top: 20rpx;
		}
	}
    

</style>
